<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>macOS 模拟桌面</title>
    <script src="https://cdn.tailwindcss.com"></script>
    
    <!-- 配置Tailwind自定义颜色和字体 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        'macos-gray': '#f5f5f7',
                        'macos-dark': '#1c1c1e',
                        'macos-blue': '#0071e3',
                        'macos-red': '#ff3b30',
                        'macos-yellow': '#ffcc00',
                        'macos-green': '#4cd964',
                        'dock-bg': 'rgba(255, 255, 255, 0.7)',
                        'dock-bg-dark': 'rgba(30, 30, 30, 0.7)',
                    },
                    fontFamily: {
                        sans: ['-apple-system', 'BlinkMacSystemFont', 'Segoe UI', 'Roboto', 'Helvetica', 'Arial', 'sans-serif'],
                    },
                    boxShadow: {
                        'macos': '0 4px 20px rgba(0, 0, 0, 0.15)',
                        'dock': '0 -2px 10px rgba(0, 0, 0, 0.1)',
                    }
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .dock-icon {
                @apply flex flex-col items-center transition-all duration-300 ease-in-out transform hover:scale-110;
            }
            .window-button {
                @apply w-3 h-3 rounded-full transition-all duration-200;
            }
            .desktop-icon {
                @apply flex flex-col items-center w-16 cursor-pointer transition-all duration-200 hover:scale-105 select-none;
            }
            .file-name {
                @apply text-xs mt-1 text-center truncate w-full;
            }
            /* 自定义图标样式 */
            .icon-apple {
                position: relative;
                width: 16px;
                height: 16px;
            }
            .icon-apple::before {
                content: '';
                position: absolute;
                width: 16px;
                height: 16px;
                border-radius: 50% 50% 50% 50% / 60% 60% 40% 40%;
                background: white;
                transform: rotate(-15deg);
            }
            .icon-safari {
                position: relative;
                width: 16px;
                height: 16px;
            }
            .icon-safari::before {
                content: '';
                position: absolute;
                width: 16px;
                height: 16px;
                border-radius: 50%;
                background: white;
            }
            .icon-safari::after {
                content: '';
                position: absolute;
                top: 8px;
                left: 0;
                width: 16px;
                height: 1px;
                background: #0071e3;
            }
            .icon-document {
                position: relative;
                width: 16px;
                height: 16px;
            }
            .icon-document::before {
                content: '';
                position: absolute;
                width: 16px;
                height: 16px;
                background: white;
            }
            .icon-document::after {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 8px;
                height: 3px;
                background: #e5e7eb;
            }
            .icon-excel {
                position: relative;
                width: 16px;
                height: 16px;
            }
            .icon-excel::before {
                content: '';
                position: absolute;
                width: 16px;
                height: 16px;
                background: white;
            }
            .icon-excel::after {
                content: '';
                position: absolute;
                top: 4px;
                left: 4px;
                width: 8px;
                height: 8px;
                background: #4cd964;
            }
            .icon-mail {
                position: relative;
                width: 16px;
                height: 16px;
            }
            .icon-mail::before {
                content: '';
                position: absolute;
                top: 0;
                left: 0;
                width: 16px;
                height: 12px;
                background: white;
                border-radius: 2px 2px 0 0;
            }
            .icon-mail::after {
                content: '';
                position: absolute;
                top: 12px;
                left: 0;
                width: 0;
                height: 0;
                border-left: 8px solid transparent;
                border-right: 8px solid transparent;
                border-top: 4px solid white;
            }
            .icon-trash {
                position: relative;
                width: 16px;
                height: 16px;
            }
            .icon-trash::before {
                content: '';
                position: absolute;
                top: 3px;
                left: 2px;
                width: 12px;
                height: 10px;
                border: 2px solid #4b5563;
                border-radius: 2px;
            }
            .icon-trash::after {
                content: '';
                position: absolute;
                top: 0;
                left: 6px;
                width: 4px;
                height: 3px;
                background: #4b5563;
            }
            .icon-wifi {
                position: relative;
                width: 16px;
                height: 16px;
            }
            .icon-wifi::before {
                content: '';
                position: absolute;
                bottom: 0;
                left: 50%;
                transform: translateX(-50%);
                width: 8px;
                height: 8px;
                border: 2px solid #4b5563;
                border-top-color: transparent;
                border-right-color: transparent;
                border-radius: 50%;
                transform: translateX(-50%) rotate(45deg);
            }
            .icon-wifi::after {
                content: '';
                position: absolute;
                bottom: 4px;
                left: 50%;
                transform: translateX(-50%);
                width: 12px;
                height: 12px;
                border: 2px solid #4b5563;
                border-top-color: transparent;
                border-right-color: transparent;
                border-radius: 50%;
                transform: translateX(-50%) rotate(45deg);
            }
            .icon-battery {
                position: relative;
                width: 16px;
                height: 10px;
                border: 2px solid #4b5563;
                border-radius: 2px;
            }
            .icon-battery::after {
                content: '';
                position: absolute;
                top: 2px;
                right: -4px;
                width: 2px;
                height: 6px;
                background: #4b5563;
                border-radius: 0 2px 2px 0;
            }
            .icon-battery::before {
                content: '';
                position: absolute;
                top: 2px;
                left: 2px;
                width: 10px;
                height: 6px;
                background: #4b5563;
                border-radius: 1px;
            }
        }
    </style>
</head>
<body class="bg-gradient-to-br from-gray-100 to-gray-200 min-h-screen overflow-hidden font-sans transition-colors duration-300">
    <!-- 顶部菜单栏 -->
    <header class="bg-white/80 backdrop-blur-sm h-7 flex items-center px-4 shadow-sm z-50 relative">
        <div class="flex space-x-6">
            <div class="text-sm font-medium">苹果</div>
            <div class="text-sm">文件</div>
            <div class="text-sm">编辑</div>
            <div class="text-sm">查看</div>
            <div class="text-sm">前往</div>
            <div class="text-sm">窗口</div>
            <div class="text-sm">帮助</div>
        </div>
        <div class="ml-auto flex items-center space-x-4">
            <div class="text-sm">控制中心</div>
            <div class="text-sm">日期与时间</div>
            <div class="w-8 h-6 flex items-center justify-center">
                <div class="icon-wifi"></div>
            </div>
            <div class="w-8 h-6 flex items-center justify-center">
                <div class="icon-battery"></div>
            </div>
        </div>
    </header>

    <!-- 桌面内容 -->
    <main class="relative h-[calc(100vh-4rem)] overflow-hidden">
        <!-- 桌面图标 - 10个Excel文件 -->
        <div class="absolute top-8 left-8 grid grid-cols-5 gap-8">
            <!-- 生成10个Excel文件图标 -->
            <div class="desktop-icon" draggable="true">
                <div class="w-12 h-16 bg-green-500 rounded flex items-center justify-center shadow-md">
                    <div class="icon-excel"></div>
                </div>
                <div class="file-name">文档1.xlsx</div>
            </div>
            
            <div class="desktop-icon" draggable="true">
                <div class="w-12 h-16 bg-green-500 rounded flex items-center justify-center shadow-md">
                    <div class="icon-excel"></div>
                </div>
                <div class="file-name">文档2.xlsx</div>
            </div>
            
            <div class="desktop-icon" draggable="true">
                <div class="w-12 h-16 bg-green-500 rounded flex items-center justify-center shadow-md">
                    <div class="icon-excel"></div>
                </div>
                <div class="file-name">文档3.xlsx</div>
            </div>
            
            <div class="desktop-icon" draggable="true">
                <div class="w-12 h-16 bg-green-500 rounded flex items-center justify-center shadow-md">
                    <div class="icon-excel"></div>
                </div>
                <div class="file-name">文档4.xlsx</div>
            </div>
            
            <div class="desktop-icon" draggable="true">
                <div class="w-12 h-16 bg-green-500 rounded flex items-center justify-center shadow-md">
                    <div class="icon-excel"></div>
                </div>
                <div class="file-name">文档5.xlsx</div>
            </div>
            
            <div class="desktop-icon" draggable="true">
                <div class="w-12 h-16 bg-green-500 rounded flex items-center justify-center shadow-md">
                    <div class="icon-excel"></div>
                </div>
                <div class="file-name">文档6.xlsx</div>
            </div>
            
            <div class="desktop-icon" draggable="true">
                <div class="w-12 h-16 bg-green-500 rounded flex items-center justify-center shadow-md">
                    <div class="icon-excel"></div>
                </div>
                <div class="file-name">文档7.xlsx</div>
            </div>
            
            <div class="desktop-icon" draggable="true">
                <div class="w-12 h-16 bg-green-500 rounded flex items-center justify-center shadow-md">
                    <div class="icon-excel"></div>
                </div>
                <div class="file-name">文档8.xlsx</div>
            </div>
            
            <div class="desktop-icon" draggable="true">
                <div class="w-12 h-16 bg-green-500 rounded flex items-center justify-center shadow-md">
                    <div class="icon-excel"></div>
                </div>
                <div class="file-name">文档9.xlsx</div>
            </div>
            
            <div class="desktop-icon" draggable="true">
                <div class="w-12 h-16 bg-green-500 rounded flex items-center justify-center shadow-md">
                    <div class="icon-excel"></div>
                </div>
                <div class="file-name">文档10.xlsx</div>
            </div>
        </div>

        <!-- 窗口 -->
        <div id="window" class="absolute top-1/4 left-1/4 w-3/5 h-2/3 bg-white rounded-lg shadow-macos overflow-hidden transition-all duration-300 z-40">
            <!-- 窗口标题栏 -->
            <div class="h-8 bg-gray-50 flex items-center px-4 cursor-move">
                <div class="flex space-x-2">
                    <div class="window-button bg-macos-red hover:bg-red-600"></div>
                    <div class="window-button bg-macos-yellow hover:bg-yellow-500"></div>
                    <div class="window-button bg-macos-green hover:bg-green-600"></div>
                </div>
                <div class="ml-4 text-sm text-gray-700">未命名窗口</div>
            </div>
            
            <!-- 窗口内容 -->
            <div class="h-[calc(100%-2rem)] p-6">
                <!-- 窗口内容区域 -->
                <div class="w-full h-full flex items-center justify-center text-gray-400">
                    <p>窗口内容区域</p>
                </div>
            </div>
        </div>
    </main>

    <!-- 底部Dock栏 -->
    <footer class="h-16 bg-dock-bg backdrop-blur-md rounded-t-2xl shadow-dock flex items-center justify-center px-8 z-50 relative">
        <div class="flex items-center space-x-4">
            <div class="dock-icon">
                <div class="w-10 h-10 rounded-full bg-gray-800 flex items-center justify-center">
                    <div class="icon-apple"></div>
                </div>
            </div>
            
            <div class="dock-icon">
                <div class="w-10 h-10 rounded-full bg-blue-500 flex items-center justify-center">
                    <div class="icon-safari"></div>
                </div>
            </div>
            
            <div class="dock-icon">
                <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center">
                    <div class="icon-document"></div>
                </div>
            </div>
            
            <div class="dock-icon relative">
                <div class="w-10 h-10 rounded-full bg-green-500 flex items-center justify-center">
                    <div class="icon-excel"></div>
                </div>
                <div class="absolute -top-1 w-2 h-2 bg-red-500 rounded-full"></div>
            </div>
            
            <div class="dock-icon">
                <div class="w-10 h-10 rounded-full bg-blue-600 flex items-center justify-center">
                    <div class="icon-mail"></div>
                </div>
            </div>
            
            <div class="h-8 w-px bg-gray-300 mx-1"></div>
            
            <div class="dock-icon">
                <div class="w-10 h-10 rounded-full bg-gray-200 flex items-center justify-center">
                    <div class="icon-trash"></div>
                </div>
            </div>
        </div>
    </footer>

    <script>
        // 窗口拖动功能
        const windowElement = document.getElementById('window');
        const titleBar = windowElement.querySelector('.h-8');
        let isDragging = false;
        let offsetX, offsetY;

        titleBar.addEventListener('mousedown', (e) => {
            isDragging = true;
            const rect = windowElement.getBoundingClientRect();
            offsetX = e.clientX - rect.left;
            offsetY = e.clientY - rect.top;
            windowElement.style.zIndex = '50';
        });

        document.addEventListener('mousemove', (e) => {
            if (!isDragging) return;
            
            const x = e.clientX - offsetX;
            const y = e.clientY - offsetY;
            
            // 限制窗口在可视区域内
            const maxX = window.innerWidth - windowElement.offsetWidth;
            const maxY = window.innerHeight - windowElement.offsetHeight;
            
            const constrainedX = Math.max(0, Math.min(x, maxX));
            const constrainedY = Math.max(0, Math.min(y, maxY));
            
            windowElement.style.left = `${constrainedX}px`;
            windowElement.style.top = `${constrainedY}px`;
        });

        document.addEventListener('mouseup', () => {
            isDragging = false;
            windowElement.style.zIndex = '40';
        });

        // 窗口控制按钮功能
        const closeBtn = windowElement.querySelector('.bg-macos-red');
        const minimizeBtn = windowElement.querySelector('.bg-macos-yellow');
        const maximizeBtn = windowElement.querySelector('.bg-macos-green');
        
        let isMaximized = false;
        let originalSize = { width: '', height: '', top: '', left: '' };

        closeBtn.addEventListener('click', () => {
            windowElement.style.display = 'none';
        });

        minimizeBtn.addEventListener('click', () => {
            windowElement.style.transform = 'scale(0.1)';
            windowElement.style.opacity = '0';
            setTimeout(() => {
                windowElement.style.display = 'none';
                windowElement.style.transform = 'scale(1)';
                windowElement.style.opacity = '1';
            }, 300);
        });

        maximizeBtn.addEventListener('click', () => {
            if (!isMaximized) {
                // 保存原始尺寸和位置
                originalSize.width = windowElement.style.width;
                originalSize.height = windowElement.style.height;
                originalSize.top = windowElement.style.top;
                originalSize.left = windowElement.style.left;
                
                // 最大化窗口
                windowElement.style.width = 'calc(100% - 2rem)';
                windowElement.style.height = 'calc(100vh - 8rem)';
                windowElement.style.top = '2rem';
                windowElement.style.left = '1rem';
                isMaximized = true;
            } else {
                // 恢复原始尺寸和位置
                windowElement.style.width = originalSize.width;
                windowElement.style.height = originalSize.height;
                windowElement.style.top = originalSize.top;
                windowElement.style.left = originalSize.left;
                isMaximized = false;
            }
        });

        // 模拟桌面图标点击效果
        const desktopIcons = document.querySelectorAll('.desktop-icon');
        desktopIcons.forEach(icon => {
            icon.addEventListener('click', (e) => {
                e.preventDefault();
                // 简单的点击效果
                icon.classList.add('scale-95');
                setTimeout(() => {
                    icon.classList.remove('scale-95');
                }, 150);
            });
        });
    </script>
</body>
</html>
